<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>メニュー</title>
<script type="text/javascript" src="http://kiyoto777.web.fc2.com/jquery/jquery.1.10.2-min.js"></script>
<style>
#menu{
clear: both;
}
#menu li{
float: left;
width:100px;
height:50px;
padding:0 12px;
text-align: center;
line-height:50px;
list-style-type:none;
}
#menu a{
display:block;
height:47px;
padding:0 12px;
line-height:50px;
text-decoration:none;
}
.menuBAR{
display:block;
width: 100%;
height: 103px;/* わかり易いように 103pxにした */
background: #cc7070;
}
</style>

<script>
$(document).ready(function() {
var nav = $(".menu-link");
var bar = $("<span></span>").addClass("menuBAR");
nav.click(
function(){
$(this).after(bar);
bar.css("margin-top","0px");// ★ ここを追加
bar.stop().animate({'marginTop':'-50px'},'fast');// ★　わかり易いように　-50pxにした
});
});
</script>

</head>
<body>
<div id="menu">
<ul>
<li><a href="#" class="menu-link">メニュー1</a></li>
<li><a href="#" class="menu-link">メニュー2</a></li>
<li><a href="#" class="menu-link">メニュー3</a></li>
</ul>
</div>

</body>
</html>

